<template>
  <div class="wrap">
    <div class="bgWrap">
      <div class="item">
        <div class="title">开户行<em>(请绑定持卡人本人的银行卡)</em></div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="bankCardName"
            placeholder="请输入开户行"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">银行卡号</div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="bankCardNum"
            placeholder="请输入银行卡号"
          />
        </div>
      </div>
      <div class="item">
        <div class="title">持卡人</div>
        <div class="inputWrap">
          <input
            type=""
            name=""
            value=""
            v-model="userName"
            placeholder="请输入持卡人"
          />
        </div>
      </div>
    </div>
    <div class="btnSure" @click="getAddUserBank">确定</div>
  </div>
</template>

<script>
import { apiAddUserBank } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      bankCardName: "",
      bankCardNum: "",
      userName: "",
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    //添加银行卡
    getAddUserBank() {
      if (this.bankCardName == "" || this.bankCardNum == "" || this.userName == "") {
        this.$toast.fail("请填写完整信息");
        return;
      }
      apiAddUserBank({
        bankName: this.bankCardName,
        cardNum: this.bankCardNum,
        realName: this.userName,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("添加成功");
          this.$router.push({
            path: "/pages/myBankCarList",
            query: {
              //传递参数
            },
          });
        }
      });
    },
  },
  created() {},
  components: {
  },
};
</script>

<style scoped>
.bgWrap {
  width: calc(95% - 30px);
  padding: 20px 15px;
  margin: 0 auto;
  border-radius: 20px;
}
.item {
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 15px;
}
.left {
  float: left;
  margin-top: 30px;
}
.right {
  float: right;
}
.title em {
  color: #999;
}
.inputWrap {
  width: 100%;
  background: #fff;
  height: 40px;
  margin-top: 10px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
}
input {
  border: 0px;
  width: 85%;
  height: 38px;
  margin-left: 15px;
}
input::placeholder {
  font-size: 12px;
  font-weight: 300;
  color: #999999;
}
.rightArrow {
  width: 4px;
  height: 8px;
  margin-right: 15px;
  margin-top: 15px;
}
.btnSure {
  width: 95%;
  position: fixed;
  left: 2.5%;
  bottom: 20px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
